<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏网站</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--    <link rel="stylesheet" href="fonts/iconfont.css">-->
    <link rel="stylesheet" href="css/style.css">
    <link href="//unpkg.com/layui@2.9.14/dist/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <!--引入图标库-->
    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">-->

    <link rel="stylesheet" href="elementUI/elementCSS.css"/>

    <link rel="stylesheet" href="css/index.css">
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        [v-cloak] {
            display: none;
        }

        .delete-button {
            background-color: #ff4d4d;
            color: #f8f8f8;
            border: none;
            padding: 1px 9px;
            font-size: 14px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .delete-button:hover {
            background-color: #e60000;
        }

        .delete-button:active {
            background-color: #cc0000;
        }

        .update-button {
            background-color: #0263f5;
            color: #f8f8f8;
            border: none;
            padding: 1px 9px;
            font-size: 14px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .update-button:hover {
            background-color: #0052cc;
        }

    </style>
</head>

<body>

<div id="app" v-cloak>


    <!--头部-->
    <nav class="navbar">
        <div class="nav-container" style="width: 100%;position: relative;">
            <a href="book.html" class="brand"><i class="bi bi-house-door"></i> 首页</a>
            <ul class="nav-links">
                <li><a href="dingdan.html"><i class="bi bi-clipboard-data"></i> 我的订单</a></li>
                <li><a href="gouwuche.html"><i class="bi bi-cart"></i> 我的购物车</a></li>
                <li><a href="myborrow.html"><i class="bi bi-journal-check"></i> 借书记录</a></li>
                <li><a href="#"><i class="bi bi-heart"></i> 我的收藏</a></li>
                <li><a href="gonggao.html"><i class="bi bi-megaphone"></i> 系统公告(5)</a></li>
                <li><a href="wenda.html"><i class="bi bi-chat-text"></i> 问答(5)</a></li>
                <li style="margin-left: 100px;">
                    <img @click="show_alter_info" style="width: 32px;cursor: pointer;" :src="user.profile" alt="">
                </li>
                <li><a href="zhuye.html"><i class="bi bi-person"></i> 主页</a></li>
                <li @click="logout"><i class="bi bi-box-arrow-right"></i> 退出登录</li>
            </ul>
        </div>
    </nav>
    <!--头部end-->

    <div class="header-bg">
        <img src="img/4.jpg" alt="">
        <div class="title">
            公告详情
        </div>
    </div>


    <div class="content w py-3 contentBlogDetails">
        <div class="content-l">
            <div class="card">
                <!-- <img class="card-img-top" src="images/banner2.jpg" alt="">-->
                <div class="card-body">

                    <img class="card-img-top" src="images/banner4.jpg" alt="">

                    <p>
                        <span class="text-muted">日期: {{ formatDate(gonggao.time) }}</span>
                    </p>
                    <h3 class="card-title">{{gonggao.title}}</h3>
                    <p class="card-text" style=" text-indent: 2em; line-height: 27pt;" v-html="gonggao.content">
                    </p>
                    <blockquote style="margin-top:30px;" class="blockquote">
                        <em class="mb-0 blockquote-footer">
                            by {{gonggao.user}}<br>
                            重要程度: {{gonggao.important}}
                        </em>
                    </blockquote>

                </div>
            </div>


            <!--留言区 start-->
            <h4 class="mb-3">留言区</h4>


            <!-- <div class="card mb-3">
                 <div class="row no-gutters">
                     <div class="col-2 userBox">
                         <div class="user">
                             <img src="images/user.png" class="card-img" alt="...">
                         </div>
                     </div>
                     <div class="col-10">
                         <div class="card-body">
                             <h5 class="card-title">法外狂徒张三 <small class="text-muted">发布于10分钟之前</small></h5>
                             <p class="card-text">你说的对，你说的有道理</p>


                         </div>

                     </div>
                 </div>
             </div>-->


            <div class="card mb-3" v-for="(liuyan,index) in liuyan_list" :key="index">
                <div class="row no-gutters">
                    <div class="col-2 userBox">
                        <div class="user">
                            <img :src="liuyan.profile" class="card-img" alt="...">
                        </div>
                    </div>
                    <div class="col-10">
                        <div class="card-body">
                            <h5 class="card-title">{{liuyan.user}}
                                <small class="text-muted">{{formatDate(liuyan.time)}}</small>
                                <!-- 男性图标 -->
                                <i v-if="liuyan.sex=='男'" class="bi bi-gender-male" style="color: blue;"></i>

                                <!-- 女性图标 -->
                                <i v-else class="bi bi-gender-female" style="color: red;"></i>

                            </h5>
                            <p class="card-text">{{liuyan.content}}</p>
                            <button v-if="liuyan.user==user.username" class="delete-button"
                                    @click="deleteLiuyan(liuyan.id)">删除
                            </button>
                            <button v-if="liuyan.user==user.username" class="update-button"
                                    @click="updateLiuyan(liuyan.id,liuyan.content)">修改
                            </button>
                        </div>
                    </div>
                </div>
            </div>


            <!--留言区 end-->
            <h4 class="mb-3">发表留言</h4>
            <form>
                <!--<div class="form-row mb-3">
                    <div class="col">
                        <input type="text" class="form-control" placeholder="用户名">
                    </div>
                    <div class="col">
                        <input type="text" class="form-control" placeholder="邮箱">
                    </div>
                </div>-->
                <div class="form-group">
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                          placeholder="请输入你的留言内容" v-model="your_liuyan"></textarea></div>
                <button class="btn" @click="submit_liuyan(event)">发表</button>
            </form>


        </div>
        <div class="content-r">
            <h4 class="mb-3">搜索</h4>
            <div class="search mb-3 row">
                <div class="col-9 pr-0">
                    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="搜索">
                </div>
                <div class="col-3 ">
                    <button type="button" class="btn btn-dark">搜索</button>
                </div>
            </div>
            <h4 class="mb-3">分类标签</h4>
            <div class="tags mb-3">
                <span class="badge badge-dark">游戏</span>
                <span class="badge badge-dark">攻略</span>
                <span class="badge badge-dark">视频</span>
                <span class="badge badge-dark">文章</span>
                <span class="badge badge-dark">王者荣耀</span>
                <span class="badge badge-dark">英雄联盟</span>
            </div>
            <h4 class="mb-3">网站信息</h4>
            <footer class="footer shadow-lg">
                <p>健康提示</p>
                <p>啦啦啦游戏网,小朋友快来玩啊!</p>
                <p>友情链接</p>
                <p>
                    <a href="#">百度</a>
                    <a href="#">百度</a>
                    <a href="#">百度</a>
                    <a href="#">百度</a>
                </p>
            </footer>
        </div>
    </div>

    <div>
        <el-dialog
                title="修改留言"
                :visible.sync="dialogVisible"
                width="50%"
                @close="handleClose"
                :close-on-click-modal="false"> <!-- 这里设置为 false -->

            <el-form ref="form" :model="form">
                <el-form-item label="留言内容">
                    <el-input
                            type="textarea"
                            v-model="form.content"
                            rows="10"
                            placeholder="请输入修改后的留言"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="changeLiuyan">修改</el-button>
        </span>
        </el-dialog>
    </div>

</div>

<!-- 引入 jQuery -->
<script src="js/jquery.min.js"></script>
<!-- 引入 layui.js -->
<script src="layui/layui.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/vue@2.js"></script>
<!-- 引入 Axios 库 -->
<script src="js/axios.min.js"></script>
<!--<script src="elementUI/elementJS.js"></script>-->
<!-- 引入 Element UI 组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/data.js"></script>


<script src="js/pulblicfuntion.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: {},
            id: "",
            gonggao: {},
            liuyan_list: [],
            your_liuyan: "",
            dialogVisible: false,
            form: {
                content: '',
                id: ''
            }

        }, created() {
            console.log("生命周期-created");
            // 读取登录用户信息
            axios.get(urlluodeng + '/user/getLoginUser').then((response) => {
                if (!response.data.result) {
                    alert(response.data.msg);
                    window.location.href = 'login.html';
                } else {
                    console.log("登录用户信息：");
                    this.user = response.data.userData;
                    console.log(this.user.sex);
                    console.log(this.user.sex ==='男');
                    console.log('读取数据:')
                    //用户信息获取成功后，获取数据 // 获取公告内容
                    // 调用 getRouterParams 函数获取 URLSearchParams 对象
                    const params = getRouterParams();
                    this.id = params.get('id');
                    this.getGonggaoInfo(params.get('id'));
                    this.getLiuyanList(params.get('id'));
                }
            });
        },
        methods: {
            changeLiuyan() {

                let formData = new FormData();
                formData.append('id', this.form.id);
                formData.append('content', this.form.content);
                formData.append('user', this.user.username);

                axios.post(urlluodeng + '/liuyan/updateLiuyanbyId', formData).then((response) => {
                    if (response.data.result) {
                        this.getLiuyanList(this.id);
                        layer.msg('修改成功!', {icon: 1, time: 1000});
                    } else if (response.data.resultcode === 0) {
                        alert(response.data.msg);
                        window.location.href = 'login.html';
                    } else {
                        layer.msg(response.data.msg, {icon: 2, time: 1000});
                    }
                }).catch((error) => {
                    console.log(error);
                    layer.msg('修改失败，请稍后再试', {icon: 2, time: 1000});
                })
            },
            handleClose() {
                this.resetForm();
            },
            resetForm() {
                this.form.content = '';
            },
            loadInitialContent() {
                // 在这里加载初始留言内容，例如通过API获取留言内容
                /* this.form.content = '这是示例的初始留言内容';*/
            },

            //修改留言
            updateLiuyan(id, oldcontent) {

                this.dialogVisible = true;
                this.loadInitialContent();
                console.log("修改留言:");
                console.log(oldcontent);

                this.form.content = oldcontent;
                this.form.id = id;
            },
            //删除留言
            deleteLiuyan(id) {
                console.log("删除留言");
                let formData = new FormData();
                formData.append('id', id);
                formData.append('user', this.user.username);//传递当前登录的用户名给后端

                axios.post(urlluodeng + '/liuyan/deleteLiuyanById', formData).then((response) => {
                    if (response.data.result) {
                        this.getLiuyanList(this.id);
                        layer.msg('删除成功!', {icon: 1, time: 1000});
                    } else if (response.data.resultcode === 0) {
                        alert(response.data.msg);
                        window.location.href = 'login.html';
                    } else {
                        layer.msg(response.data.msg, {icon: 2, time: 1000});
                    }
                }).catch((error) => {
                    console.log(error);
                    layer.msg('删除失败，请稍后再试', {icon: 2, time: 1000});
                });
            },
            //提交留言
            submit_liuyan(event) {
                event.preventDefault();
                console.log("提交留言");
                let formData = new FormData();
                formData.append('gonggaoid', this.id);
                formData.append('content', this.your_liuyan);
                formData.append('user', this.user.username);
                axios.post(urlluodeng + '/liuyan/addLiuyan', formData).then((response) => {
                    if (response.data.result) {
                        this.getLiuyanList(this.id);
                        this.your_liuyan = "";
                        layer.msg('留言成功!', {icon: 1, time: 1000});
                    } else {
                        layer.msg(response.data.msg, {icon: 2, time: 1000});
                    }
                }).catch((error) => {
                    console.log(error);
                    layer.msg('留言失败，请稍后再试', {icon: 2, time: 1000});
                });

                //刷新页面
                /*  this.getGonggaoInfo(this.id);*/
            },
            //格式化日期
            formatDate(isoString) {
                const date = new Date(isoString);
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0'); // getMonth() 返回值为 0-11
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');

                return `${year}-${month}-${day} ${hours}:${minutes}`;
            },
            //根据id获取图书信息
            async getGonggaoInfo(id) {
                /* {
                     "msg": "获取留言信息成功",
                     "code": 200,
                     "data": [
                     {
                         "id": 1,
                         "user": "billie",
                         "content": "\n",
                         "gonggaoid": 7,
                         "time": "2024-07-24T10:57:00.000+00:00",
                         "profile": "",
                         "name": "碧梨",
                         "username": "billie",
                         "password": "123",
                         "balance": 0,
                         "email": "3407708637@qq.com",
                         "sex": "女",
                         "create_time": "2024-07-23T15:50:45.000+00:00"
                     }
                 ],
                     "count": 1
                 }*/
                try {
                    // 发送请求并等待其完成
                    const res = await axios.get(urlluodeng + '/gonggao/getGonggaoById?id=' + id);

                    if (!res.data.result && res.data.code == 200) {
                        alert(res.data.msg);
                        window.location.href = 'book.html';
                    } else if (!res.data.result && res.data.code == 500) {
                        layer.msg("服务器错误，请稍后再试！", {icon: 2, time: 2000});
                    } else if (res.data.result) {
                        console.log("公告信息获取成功：");
                        console.log(res.data);
                    } else {
                        console.log("公告信息获取失败：未知错误");
                    }
                    this.gonggao = res.data.data;
                } catch (err) {
                    console.log(err);
                    layer.msg('图书信息获取失败，请稍后再试', {icon: 2, time: 1000});
                }
            },
            //根据id获取图书信息
            async getLiuyanList(id) {
                try {
                    // 发送请求并等待其完成
                    const res = await axios.get(urlluodeng + '/liuyan/getLiuyan?gonggaoid=' + id);
                    this.liuyan_list = res.data.data;
                } catch (err) {
                    console.log(err);
                    layer.msg('留言信息获取失败，请稍后再试', {icon: 2, time: 1000});
                }
            },
            show_alter_info() {
                showUserAvatar(this.user);
            },
            logout() {
                logout();
            }
        }

    });
</script>

</body>

</html>
